<template>
  <view class="choose-package">
    <page-loading :show="showPage">
      <view v-if="res && !loading">
        <view class="pic-box">
          <image class="pic" :src="res.pic_URL"></image>
        </view>
        
        <!-- 券码 -->
        <view class="coupon-code-box">
          <view class="coupon">
            <image :src="res.qR_Main_Path" class="img"></image>
          </view>
          <text class="text">门店核销出示扫码</text>
        </view>
        
        <view class="content-box">
          <view class="term-of-validity">
            <text class="label">有效时间</text>
            <text class="value">{{res.start_Time}}至{{res.deadline}}</text>
          </view>
        
          <view class="package">
            <view class="package-title"><text>{{res.coupon_package_name}}</text></view>
        
            <view class="list-box">
              <view class="cell" v-for="(item, index) in res.couponBagListResponse" :key="index">
                <view class="top">
                  <text class="text">{{item.group_Name}}</text>
                </view>
                <view class="item-box">
                  <view class="item" v-for="(i, k) in item.couponBagDetailList" :key="k" :class="{disabled: res.deadline !== '2099-12-31' && i.left_Num < 1 && i.left_Num !== null}">
                    <image class="img" :src="i.pic_Details_URL" v-if="i.coupon_Goods_Rule_Type_Id === 1 || i.coupon_Goods_Rule_Type_Id === 4"></image>
                    <view class="left-text" v-else><text>服务工时费</text></view>
                    
                    <view class="info">
                      <view class="title">
                        <text class="t">{{i.coupon_Name}}</text>
                        <text class="num" v-if="res.deadline === '2099-12-31'">x{{res.deadline === '2099-12-31' ? '终身' : i.left_Num}}</text>
                        <text class="num" v-else>{{i.left_Num ? `x${i.left_Num}` : '365 x 终身'}}</text>
                      </view>
                      <!-- <view class="tags">
                        <text class="text">全合成</text>
                        <text class="text">5W-40</text>
                        <text class="text">SP</text>
                        <text class="text">4L</text>
                      </view> -->
                      <view class="bottom-box">
                        <text class="price">￥<text class="strong">{{i.cost_Price}}</text></text>
                        <text class="status" v-if="i.left_Num !== null && i.left_Num < 1 && res.deadline !== '2099-12-31'">次数已用完</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
        
            </view>
          </view>
        
          <view class="section">
            <view class="item">
              <text class="label">订单金额</text>
              <text class="value">满0元可用</text>
            </view>
            <view class="item">
              <text class="label">使用规则</text>
              <text class="value">{{res.use_Rule_Description || '满0卡券使用后概不退换'}}</text>
            </view>
          </view>
        </view>
        
        <!-- 使用记录 -->
        <view class="use-record" v-if="res.couponOrderListResponse && res.couponOrderListResponse.length > 0">
          <view class="top">
            <text class="text">使用记录</text>
          </view>
          <view class="list">
            <view class="cell" v-for="(item, index) in res.couponOrderListResponse" :key="index">
              <view class="row">
                <text class="label">核销场景</text>
                <view class="right">
                  <text class="value">{{item.palace}}</text>
                </view>
              </view>
              <view class="row" @click="onClickOrder(item)">
                <text class="label">使用时间</text>
                <view class="right">
                  <text class="value">{{item.usetime | formatDate}}</text>
                  <u-icon name="arrow-right" size="24" color="#999" v-if="item.palace && item.palace.indexOf('线上') > -1"></u-icon>
                </view>
              </view>
              <view class="row" v-if="item.palace && item.palace.indexOf('线下') > -1">
                <text class="label">核销门店</text>
                <view class="right">
                  <text class="value">{{item.store_name}}</text>
                </view>
              </view>
              <view class="row" v-else>
                <text class="label">订单号</text>
                <view class="right">
                  <text class="value">{{item.order_no}}</text>
                </view>
              </view>
              <view class="row">
                <text class="label">核销项目</text>
                <view class="item-list">
                  <view class="right" v-for="(i, k) in item.project" :key="k">
                    <text class="value">{{i.coupon_Name}}</text>
                    <text class="num">x1</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      
        <view class="footer">
          <view class="btn-box" v-if="isNeedAddCar && res.limiting_Condition_Type === 1">
            <view class="btn" @click="onClickBindLoveCar"><text>绑定车辆</text></view>
          </view>
          <view class="btn-box" v-else>
            <view class="btn" @click="onClickUse" :class="{disabled: expire}"><text>立即使用</text></view>
          </view>
        </view>
      </view>
    </page-loading>

    <u-popup v-model="show" mode="center" border-radius="20" width="600" :mask-close-able="false">
      <view class="popup-content">
        <view class="title"><text>温馨提示</text></view>
        <view class="content"><text>该卡券（已过期/用完）不可使用</text></view>
        <view class="btn" @click="openPopup(false)"><text>知道了</text></view>
      </view>
    </u-popup>

    <u-popup v-model="showBind" mode="center" border-radius="20" width="600" :mask-close-able="false">
      <view class="bind-content-popup">
        <view class="title"><text>温馨提示</text></view>
        <view class="content" v-if="loveCar">
          <text>您购买的【{{res.coupon_package_name}}】\n将绑定车牌号为：<text class="bold">{{loveCar.car_Num}}</text>\n{{loveCar.car_Type_Name}}
            {{loveCar.car_Name}}\n绑定不可更改</text>
        </view>
        <view class="btn-box">
          <view class="btn left" @click="showBind = false"><text>取消</text></view>
          <view class="btn right" @click="onClickBind"><text>确定</text></view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
  const dayjs = require('@/utils/dayjs.js')
  export default {
    data() {
      return {
        show: false,
        res: null,
        loading: true,
        showBind: false,
        loveCar: null,
        isNeedAddCar: false,
        couponId: '',
        leftNumStatus: true,
        expire: false,
        jump: true,
        showPage: false
      }
    },
    onLoad(option) {
      uni.setNavigationBarTitle({
        title: option.name || ''
      })

      if (option.id) {
        uni.showLoading({
          title: '加载中'
        })
        this.couponId = option.id
        this.getSetMealDetail(option.id)
      }

      uni.$on('setMealDetail', data => {
        this.loveCar = data
        this.showBind = true
      })
    },
    filters: {
      formatDate(data) {
        return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    methods: {
      openPopup(data) {
        this.show = data
      },
      async getSetMealDetail(id) {
        try {
          const res = await this.$api.user.GetCouponDetails({
            id,
            is_Package: true
          })
          uni.hideLoading()
          this.loading = false
          if (res.code === 200) {
            let couponDetailsResponse = res.data.couponDetailsResponse
            uni.setNavigationBarTitle({
              title: couponDetailsResponse.coupon_package_name
            })
            this.showPage = true
            this.res = couponDetailsResponse
            this.isNeedAddCar = res.data.isNeedAddCar
            let arr = couponDetailsResponse.couponBagListResponse.map(item => {
              item.status = item.couponBagDetailList.some(i => {
                return i.left_Num > 0
              })
              return item
            })
            this.leftNumStatus = arr.some(item => {
              return item.status
            })
            let current = dayjs().format('YYYY-MM-DD')
            let time = dayjs(current).diff(this.res.deadline, 'day')
            this.expire = (this.res.status === 1 && time >= 0) || (!this.leftNumStatus && this.res.deadline !== '2099-12-31')
          }
        } catch (e) {
          uni.hideLoading()
          this.loading = false
        }
      },
      // 绑定爱车
      onClickBindLoveCar() {
        this.jump = false
        uni.navigateTo({
          url: '/pages_common/myLoveCarList/myLoveCarList?from=setMealDetail'
        })
      },
      async onClickBind() {
        uni.showLoading({
          title: '加载中'
        })
        try {
          let userinfo = uni.getStorageSync('Ztc_C_USER_INFO')
          let res = await this.$api.common.CouponBindingCar({
            couponId: this.couponId,
            carNum: this.loveCar.car_Num,
            accountId: userinfo.id
          })
          if (res.code === 200) {
            this.showBind = false
            this.isNeedAddCar = false
            if(this.jump) {
              let t = setTimeout(() => {
                clearTimeout(t)
                uni.navigateTo({
                  url: '/pages_commodity/doMaintenance/doMaintenance'
                })
              }, 2000)
            }
          }
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
          uni.hideLoading()
        } catch (e) {
          uni.hideLoading()
        }
      },
      // 使用优惠券
      onClickUse() {
        if(this.expire) {
          this.show = true
          this.jump = true
        } else {
          uni.navigateTo({
            url: '/pages_commodity/doMaintenance/doMaintenance'
          })
        }
      },
      // 点击使用记录
      onClickOrder(data) {
        if(data.order_no && data.palace.indexOf('线上') > -1) {
          uni.navigateTo({
            url: `/pages_order/maintenanceOrderDetail/maintenanceOrderDetail?id=${data.id}`
          })
        }
      }
    },
    onUnload() {
      uni.$off('setMealDetail')
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f6f6f6;
  }

  .choose-package {
    padding-bottom: 200rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 200rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);

    .pic-box {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30rpx 0;

      .pic {
        width: 660rpx;
        height: 330rpx;
      }
    }

    .coupon-code-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      padding-bottom: 20rpx;

      .coupon {
        width: 320rpx;
        height: 320rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 280rpx;
          height: 280rpx;
        }
      }

      .text {
        color: #666;
        font-size: 28rpx;
      }
    }

    .content-box {
      background-color: #fff;
      padding: 0 30rpx;
      margin-top: 30rpx;

      .term-of-validity {
        display: flex;
        line-height: 36rpx;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #eee;

        .label {
          font-size: 24rpx;
          color: #999;
        }

        .value {
          display: block;
          flex: 1;
          margin-left: 46rpx;
          font-size: 24rpx;
          color: #333;
        }
      }

      .package {
        padding: 30rpx 0;
        border-bottom: 2rpx solid #eee;

        .package-title {
          font-size: 24rpx;
          color: #999;
        }

        .list-box {
          .cell {
            color: #333;

            .top {
              display: flex;
              align-items: center;
              margin-top: 20rpx;

              .text {
                font-size: 28rpx;
                font-weight: bold;
              }
            }

            .item-box {
              .item {
                display: flex;
                padding-top: 30rpx;

                .img {
                  width: 120rpx;
                  height: 120rpx;
                  border-radius: 10rpx;
                }

                .left-text {
                  width: 120rpx;
                  line-height: 40rpx;
                  font-size: 24rpx;
                }

                .info {
                  flex: 1;
                  margin-left: 25rpx;

                  .title {
                    display: flex;
                    line-height: 40rpx;

                    .t {
                      display: block;
                      flex: 1;
                      font-size: 24rpx;
                      margin-right: 120rpx;
                    }

                    .num {
                      font-size: 26rpx;
                    }
                  }

                  .tags {
                    display: flex;
                    align-items: center;
                    margin-top: 8rpx;

                    .text {
                      font-size: 20rpx;
                      color: #799CF2;
                      border: 1px solid #799CF2;
                      border-radius: 5rpx;
                      margin-right: 12rpx;
                      padding: 0 6rpx;
                    }

                    .text:first-child {
                      color: #EF9A3F;
                      border: 1px solid #EF9A3F;
                    }
                  }

                  .bottom-box {
                    margin-top: 10rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price {
                      font-size: 20rpx;
                      color: #FF6F6A;

                      .strong {
                        font-size: 28rpx;
                        font-weight: bold;
                      }
                    }

                    .status {
                      font-size: 26rpx;
                      color: #999;
                    }
                  }
                }
              }

              .disabled {
                color: #999;

                .img {
                  filter: grayscale(100%);
                }

                .info {
                  .bottom-box {
                    .price {
                      color: #999;
                    }
                  }
                }
              }
            }

            &.disabled {
              color: #999;
            }
          }
        }
      }

      .section {
        padding: 20rpx 0;

        .item {
          display: flex;
          line-height: 50rpx;

          .label {
            font-size: 24rpx;
            color: #999;
          }

          .value {
            display: block;
            flex: 1;
            margin-left: 46rpx;
            font-size: 24rpx;
            color: #333;
          }
        }
      }
    }

    .use-record {
      margin-top: 30rpx;

      .top {
        padding: 0 30rpx;
        font-size: 26rpx;
        color: #333;
      }

      .list {
        .cell {
          background-color: #fff;
          margin-top: 10rpx;
          padding: 20rpx 24rpx 20rpx 30rpx;

          .row {
            display: flex;
            line-height: 50rpx;

            .label {
              font-size: 24rpx;
              color: #999;
              display: block;
              width: 100rpx;
            }

            .right {
              display: flex;
              justify-content: space-between;
              flex: 1;
              margin-left: 44rpx;

              .value {
                font-size: 24rpx;
                color: #333;
              }

              .num {
                font-size: 24rpx;
                color: #333;
              }
            }

            .item-list {
              flex: 1;
            }
          }
        }
      }
    }

    .footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);

      .btn-box {
        padding: 0 24rpx 30rpx;
        display: flex;

        .btn {
          flex: 1;
          height: 88rpx;
          background: linear-gradient(0deg, #FBD220, #FFE23E);
          border-radius: 44rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30rpx;
          color: #3D3D3D;
        }

        .disabled {
          background: #ddd;
          color: #666;
        }

        .left {
          background: #3D3D3D;
          border-radius: 44rpx 0 0 44rpx;
          color: #FFE23E;
        }

        .right {
          background: linear-gradient(0deg, #FBD220, #FFE23E);
          border-radius: 0 44rpx 44rpx 0;
          color: #333;
        }
      }
    }

    .popup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50rpx 66rpx;

      .title {
        font-size: 34rpx;
        color: #333;
        font-weight: bold;
      }

      .content {
        font-size: 28rpx;
        color: #333;
        line-height: 50rpx;
      }

      .btn {
        margin-top: 50rpx;
        width: 468rpx;
        height: 88rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #3d3d3d;
      }
    }

    .bind-content-popup {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50rpx 66rpx;

      .title {
        font-size: 34rpx;
        color: #333;
        font-weight: bold;
      }

      .content {
        margin-top: 30rpx;
        font-size: 28rpx;
        color: #333;
        line-height: 50rpx;
        text-align: center;

        .bold {
          font-weight: bold;
          font-size: 32rpx;
        }
      }

      .btn-box {
        margin-top: 30rpx;
        display: flex;

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          width: 260rpx;
          height: 88rpx;
        }

        .left {
          background-color: #3D3D3D;
          border-radius: 44rpx 0 0 44rpx;
          color: #FFE23E;
          font-size: 28rpx;
        }

        .right {
          background: linear-gradient(0deg, #FBD220, #FFE23E);
          border-radius: 0 44rpx 44rpx 0;
          font-size: 30rpx;
          color: #333;
          margin-left: 2rpx;
        }
      }
    }
  }
</style>
